<template>
  <div class="ui-page-skeleton" v-if="visible">
    <div
      class="ui-page-skeleton__column"
      v-for="column in 5"
      :key="column"
    >
      <div
        class="ui-page-skeleton__item"
        v-for="item in 30"
        :key="item"
      >
        <ui-skeleton height="20px" radius="10px"></ui-skeleton>
      </div>
    </div>
  </div>
</template>
<script>
import UiSkeleton from '../skeleton'

export default {
  name: 'UiPageSkeleton',
  props: {
    visible: {
      type: Boolean
    }
  },
  components: {
    UiSkeleton
  }
}
</script>
<style lang="less">
.ui-page-skeleton{
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
  height: 100%;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.8+100 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ccffffff',GradientType=0 ); /* IE6-9 */
  }
  &.v-enter{
    opacity: 0;
  }
  &.v-enter-active{
    transition: all .3s;
  }
  &.v-enter-active{
    opacity: 1;
  }
  &.v-leave{
    opacity: 1;
  }
  &.v-leave-active{
    transition: all 3s;
  }
  &.v-leave-active{
    opacity: 0;
  }
}
.ui-page-skeleton__column{
  flex: 1;
  padding: 24px;
}
.ui-page-skeleton__item{
  &:not(:last-child) {
    margin-bottom: 24px;
  }
}
</style>
